<template>
<nav class="nav">
  <!-- navTop start -->
  <van-nav-bar title="购物车" right-text="管理"  >
    <template #left>
      <van-icon name="search" size="20" />
    </template>
  </van-nav-bar>
  <!-- navTop end -->
</nav>

<div class="goodsArea" v-if="goodsList.length">
  <!-- goods start -->
  <van-card
    v-for="(item,index) in goodsList" :key="index" 
    :num= item.num
    :price= item.price
    :desc= item.desc
    :title= item.title
    class="goods-card"
    :thumb= item.thumb
    
  >
    <template #tags>
      <van-tag plain type="primary">618大促</van-tag>
      <van-tag plain type="primary">先享后付</van-tag>
    </template>
    <template #footer>
      <van-button size="mini" style="background-color: hsl(215, 99%, 60%);font-weight:700;width:1.5rem">下单</van-button>
      <van-button size="mini">取消</van-button>
    </template>
  </van-card>
  <!-- goods end -->
</div>
<div v-else><h1>暂无数据</h1></div>

</template>

<script>

import axios from 'axios';

export default {    
  data() {    
    return {    
      goodsList: [],
    }  
  },    
  async created() {     
    try {  
      const response = await axios.get('/api/goods'); // 使用 await 和 async 来简化代码
      console.log("Success");   
      this.goodsList = response.data.data;
      // 测试API接入 
      // console.log(this.goodsList)   
    } catch (error) {    
      console.log(error);    
    }  
  }    
};   



</script>


<style>
.nav{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.goodsArea{
  margin-top: 90px;
  margin-bottom: 100px;
}

.goods-card {
  margin: 0;
  background-color: white;
  width: 100%;
}

.delete-button {
  height: 100%;
}

.van-card__price {
  color: #E4393C !important;
}

</style>




